<template>
  <div class="echartsBox">
    <ul>
      <li>
        <div id="situationEchartsGauge" class="allWidthHeight" />
        <p>原材料</p>
      </li>
      <li>
        <div id="situationEchartsGauge2" class="allWidthHeight" />
        <p>成品</p>
      </li>
      <li>
        <div id="situationEchartsGauge3" class="allWidthHeight" />
        <p>包装材料</p>
      </li>
      <!-- <li>
        <div id="situationEchartsGauge4" class="allWidthHeight" />
        <p>水网压力</p>
      </li> -->
    </ul>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {},
  data() {
    return {
      myChart: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      value1: "",
    };
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize();
      this.myChart2.resize();
      this.myChart3.resize();
      this.myChart4.resize();
    },
    getInfo(data) {
      this.setSituationEchartsGauge(data);
      this.setSituationEchartsGauge2(data);
      this.setSituationEchartsGauge3(data);
      // this.setSituationEchartsGauge4(data);
    },
    /* echarts */
    setSituationEchartsGauge(data) {
      const option = {
        series: [
          {
            type: "gauge",
            radius: "90%",
            center: ["50%", "45%"],
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.3, "#1D8EFE"],
                  [0.7, "#1D8EFE"],
                  [1, "#1D8EFE"],
                ],
              },
            },
            pointer: {
              length: "80%",
              width: 2,
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: 0,
              length: 3,
              lineStyle: {
                color: "#42E4FB",
                width: 1,
              },
            },
            splitLine: {
              distance: 0,
              length: 5,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisLabel: {
              color: "#fff",
              distance: 10,
              fontSize: 8,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} %",
              color: "#fff",
              fontSize: 10,
              lineHeight: 10,
              offsetCenter: [0, "30%"],
            },
            data: [
              {
                value: data.rawRate,
              },
            ],
            max: 100,
          },
        ],
      };
      if (
        this.myChart != null &&
        this.myChart !== "" &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose(); // 销毁
      }
      this.myChart = echarts.init(
        document.getElementById("situationEchartsGauge")
      );
      this.myChart.clear();
      this.myChart.setOption(option, true);
    },
    setSituationEchartsGauge2(data) {
      const option = {
        series: [
          {
            type: "gauge",
            radius: "90%",
            center: ["50%", "45%"],
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.3, "#F57474"],
                  [0.7, "#F57474"],
                  [1, "#F57474"],
                ],
              },
            },
            pointer: {
              length: "80%",
              width: 2,
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: 0,
              length: 3,
              lineStyle: {
                color: "#F57474",
                width: 1,
              },
            },
            splitLine: {
              distance: 0,
              length: 5,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisLabel: {
              color: "#fff",
              distance: 10,
              fontSize: 8,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} %",
              color: "#fff",
              fontSize: 10,
              lineHeight: 10,
              offsetCenter: [0, "30%"],
            },
            data: [
              {
                value: data.productRate,
              },
            ],
            max: 100,
          },
        ],
      };
      if (
        this.myChart2 != null &&
        this.myChart2 !== "" &&
        this.myChart2 !== undefined
      ) {
        this.myChart2.dispose(); // 销毁
      }
      this.myChart2 = echarts.init(
        document.getElementById("situationEchartsGauge2")
      );
      this.myChart2.clear();
      this.myChart2.setOption(option, true);
    },
    setSituationEchartsGauge3(data) {
      const option = {
        series: [
          {
            type: "gauge",
            radius: "90%",
            center: ["50%", "45%"],
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.3, "#56D0E3"],
                  [0.7, "#56D0E3"],
                  [1, "#56D0E3"],
                ],
              },
            },
            pointer: {
              length: "80%",
              width: 2,
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: 0,
              length: 3,
              lineStyle: {
                color: "#56D0E3",
                width: 1,
              },
            },
            splitLine: {
              distance: 0,
              length: 5,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisLabel: {
              color: "#fff",
              distance: 10,
              fontSize: 8,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} %",
              color: "#fff",
              fontSize: 10,
              lineHeight: 10,
              offsetCenter: [0, "30%"],
            },
            data: [
              {
                value: data.packageRate,
              },
            ],
            max: 100,
          },
        ],
      };
      if (
        this.myChart3 != null &&
        this.myChart3 !== "" &&
        this.myChart3 !== undefined
      ) {
        this.myChart3.dispose(); // 销毁
      }
      this.myChart3 = echarts.init(
        document.getElementById("situationEchartsGauge3")
      );
      this.myChart3.clear();
      this.myChart3.setOption(option, true);
    },
    setSituationEchartsGauge4(data) {
      const option = {
        series: [
          {
            type: "gauge",
            radius: "90%",
            center: ["50%", "45%"],
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.3, "#8B78F6"],
                  [0.7, "#8B78F6"],
                  [1, "#8B78F6"],
                ],
              },
            },
            pointer: {
              length: "80%",
              width: 2,
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: 0,
              length: 3,
              lineStyle: {
                color: "#8B78F6",
                width: 1,
              },
            },
            splitLine: {
              distance: 0,
              length: 5,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisLabel: {
              color: "#fff",
              distance: 10,
              fontSize: 8,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} %",
              color: "#fff",
              fontSize: 10,
              lineHeight: 10,
              offsetCenter: [0, "30%"],
            },
            data: [
              {
                value: data.waterNetwork,
              },
            ],
            max: 30,
          },
        ],
      };
      if (
        this.myChart4 != null &&
        this.myChart4 !== "" &&
        this.myChart4 !== undefined
      ) {
        this.myChart4.dispose(); // 销毁
      }
      this.myChart4 = echarts.init(
        document.getElementById("situationEchartsGauge4")
      );
      this.myChart4.clear();
      this.myChart4.setOption(option, true);
    },
  },
};
</script>
<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  padding: 0 20px;
  height: calc(100% - 40px);
  ul {
    height: 100%;
    overflow: hidden;
    li {
      width: 33%;
      float: left;
      height: 100%;
      position: relative;
      p {
        margin: 0;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 20px;
        color: #fff;
        text-align: center;
        font-size: 12px;
      }
    }
  }
}
</style>
